/**
 * Email:angcyo@126.com
 * @author angcyo
 * @date 2020/10/13
 *
 * http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
 * 已在index.js中初始化
 */

/**横向的flex布局*/
.flex-row {
  display: flex;
  flex-direction: row;
}

/**竖向的flex布局*/
.flex-column {
  display: flex;
  flex-direction: column;
}

/**一行排满之后, 下一行继续*/
.flex-row-wrap {
  @extend .flex-row;
  flex-wrap: wrap;
}

.flex-column-wrap {
  @extend .flex-column;
  flex-wrap: wrap;
}

/**弹性布局, 可以实现2个项, 左边一个, 右边一个*/
.flex-row-space-between {
  //弹性布局
  display: flex;
  //主轴的方向, 多个项, 按照列的方式排列
  flex-direction: row;
  // 项在主轴上的对齐方式.  平分空隙, 但是首尾无间隙; space-around:首尾有间隙
  justify-content: space-between
}

.flex-column-space-between {
  @extend .flex-row-space-between;
  flex-direction: column;
}

.flex-row-space-around {
  display: flex;
  flex-direction: row;
  justify-content: space-around
}

.flex-column-space-around {
  @extend .flex-row-space-around;
  flex-direction: column;
}

// --------------flex item-------------------//

/**平分剩余空间*/
.flex-item-avg {
  flex-grow: 1;
}

// ----------------对齐-------------------//

/**在行中居中*/
.flex-center-row {
  justify-content: center;
}

/**在列中居中*/
.flex-center-column {
  align-items: center;
  //  justify-items: center;
}

/**靠列的顶部对齐*/
.flex-start-column {
  align-items: start;
}
